.loading-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	&.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 75px;
		height: 75px;
		border-radius: 6px;
		background-color: rgba(0, 0, 0, 0.1);
		position: relative;
		top: -35px;
		.box {
			width: 36px;
			height: 36px;
			position: relative;
			.line {
				width: 3px;
				height: 36px;
				position: absolute;
				left: 16.5px;
				top: 0;
				&::before {
					top: 0;
				}
				&::after {
					bottom: 0;
				}
				&:nth-child(1) {
					transform: rotate(30deg);
				}
				&:nth-child(1)::before {
					animation: opaci_ani 1.2s linear 0s infinite;
				}
				&:nth-child(1)::after {
					animation: opaci_ani 1.2s linear 0.6s infinite;
				}
				&:nth-child(2) {
					transform: rotate(60deg);
				}
				&:nth-child(2)::before {
					animation: opaci_ani 1.2s linear 0.1s infinite;
				}
				&:nth-child(2)::after {
					animation: opaci_ani 1.2s linear 0.7s infinite;
				}
				&:nth-child(3) {
					transform: rotate(90deg);
				}
				&:nth-child(3)::before {
					animation: opaci_ani 1.2s linear 0.2s infinite;
				}
				&:nth-child(3)::after {
					animation: opaci_ani 1.2s linear 0.8s infinite;
				}
				&:nth-child(4) {
					transform: rotate(120deg);
				}
				&:nth-child(4)::before {
					animation: opaci_ani 1.2s linear 0.3s infinite;
				}
				&:nth-child(4)::after {
					animation: opaci_ani 1.2s linear 0.9s infinite;
				}
				&:nth-child(5) {
					transform: rotate(150deg);
				}
				&:nth-child(5)::before {
					animation: opaci_ani 1.2s linear 0.4s infinite;
				}
				&:nth-child(5)::after {
					animation: opaci_ani 1.2s linear 1s infinite;
				}
				&:nth-child(6) {
					transform: rotate(180deg);
				}
				&:nth-child(6)::before {
					animation: opaci_ani 1.2s linear 0.5s infinite;
				}
				&:nth-child(6)::after {
					animation: opaci_ani 1.2s linear 1.1s infinite;
				}
			}
		}
	}
}
.loading-wrap .loading .box .line::before,
.loading-wrap .loading .box .line::after {
	content: "";
	display: block;
	width: 3px;
	height: 10px;
	position: absolute;
	left: 0;
	background: white;
	border-radius: 50px;
}
.loading-wrap .loading .box.black .line::before,
.loading-wrap .loading .box.black .line::after {
	background: rgba(96, 96, 103, 0.6);
}


.skeleton-box {
  width: 375px;
  height: 667px;
  position: relative;
  animation: opacityAni 1.5s linear infinite;
  .skeleton-item {
    position: absolute;
    background-color: #eee;
    border-radius: 3px;
  }
}

@keyframes opacityAni {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opaci_ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
